<!--
 * @Date: 2024-02-27 16:01:53
 * @Auth: 873768511@qq.com
 * @LastEditors: 873768511@qq.com
 * @LastEditTime: 2024-02-29 09:48:40
 * @FilePath: \ztc-web\src\views\overview\components\rightBar.vue
-->
<template>
  <div class="content">
    <el-radio-group class="radio-group" v-model="radio" size="small" @change="handleChange">
      <el-radio-button :value="1">周</el-radio-button>
      <el-radio-button :value="2">月</el-radio-button>
      <el-radio-button :value="3">年</el-radio-button>
    </el-radio-group>
    <div id="rightBar" class="chart"></div>
  </div>

</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import { getCarRedBlackAnalyse } from "@/api/screen"
const radio = ref(3)
const nameList = ref([])
const countList = ref([])
function handleChange () {
	nameList.value = []
	countList.value = []
	getCarRedBlackAnalyse({ type: radio.value }).then(res => {
		res.data.forEach(item => {
			nameList.value.push(item.deptName)
			countList.value.push(item.num)
		})
    init()
  })
}
function init () {
	let myChart = echarts.init(document.getElementById('rightBar'), null, {
		renderer:"svg",
	})
  myChart.setOption({
		backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: 'rgba(11, 53, 100, 0.00)' },
			{ offset: 1, color: 'rgba(11, 53, 100, 1.00)' }
		]),
		color:['#d6ae13','#29a64f','#157bdb'],
		grid: {
			left: '8%',
			right: '10%',
			top:'20%',
			bottom: '10%',
			containLabel: true
		},
		legend: {
			bottom: '3%',
			textStyle:{
				color:'#d7e7f4'
			},
    	selectedMode: false
		},
		xAxis: {
			type: 'value',
			minInterval: 1,
			axisLabel : {
				formatter: '{value}',
				color:'#2ad1d2'
			},
			axisLine:{
					lineStyle:{
						color:'#27b4c2'
					}
			},
			axisTick:{
					show:false,
			},
			splitLine:{
					show:true,
					lineStyle:{
						color:'#11366e'
					}
			}
		},
		yAxis: {
			type: 'category',
			data: nameList.value,
			minInterval: 1,
			axisLabel: {
				interval: 0,
				rotate: 0,
				color: '#ccc',
				fontSize:10
			},
			axisLine:{
					lineStyle:{
						color:'#397cbc'
					}
			},
			axisTick:{
					show:false,
			},
		},
		dataZoom: [
    	{
				type: 'slider',//'inside',
				orient: "vertical",
				left: 15,
				moveHandleSize: 5,
				width:10,
				maxSpan:30,
    	}

		],
		// dataZoom: [{
    //     type: 'slider',
    //     show: true,
    //     right: '20',
    //     //top: '20',
    //     width: '20',
    //     //height: '280',
    //     startValue: 0,
    //     endValue: 8,
    //     zoomLock: true
    // }],
		series: [{
			type: 'bar',
			stack: 'total',
			label: {
				show: false,
			},
			data:countList.value
		}]
	})
	const zoomSize = 6;
	const Chart = myChart
	Chart.on('click', function (params) {
		Chart.dispatchAction({
			type: 'dataZoom',
			startValue: nameList.value[Math.max(params.dataIndex - zoomSize / 2, 0)],
			endValue:
				nameList.value[Math.min(params.dataIndex + zoomSize / 2, nameList.value.length - 1)]
		});
	});
}
onMounted(() => {
  handleChange()
})
</script>

<style lanf="scss" scoped>
.content{
  height: calc(100% - 40px);
  width: 100%;
  position: relative;
}
.radio-group{
 position: absolute;
 right: 30px;
 top: 20px;
 z-index: 2;
}
.chart{
  height: 100%;
  width: 100%;
  padding: 10px 10px;
  box-sizing: border-box;
}
</style>